Customizing a Tree Column

Spread.Views allows you to customize the hierarchical tree column presenter. You can customize the tree column presenter to add images, drop-down arrows for open or collapse nodes, and so on. You can even add formulas in the footer.

Use the following steps to customize the tree columns.

Sample Code

1. Add the column definition. Set the hierarchyFooter property to apply the tree view to the column. You can optionally add formulas in the column definition.

   var columns = [{
               id: 'department',
               caption: 'Department',
               dataField: 'department',
               width: 250,
               hierarchyFooter: '<span style="font-weight:bold">Count: {{=it.eval("=COUNT([id])")}}</span>'
           }, {
               id: 'budget',
               caption: 'Budget',
               dataField: 'budget',
               format: '$0.00',
               minWidth: 120,
               hierarchyFooter: '<span style="font-weight:bold">Total: {{=it.eval("=SUM([budget])", "$0,0")}}</span>'
           }, {
               id: 'location',
               caption: 'Location',
               dataField: 'location',
               minWidth: 120
           }, {
               id: 'phone',
               caption: 'Phone',
               dataField: 'phone',
               minWidth: 120
           }, {
               id: 'country',
               caption: 'Country',
               dataField: 'country',
               minWidth: 120
           }, {
               id: 'id',
               caption: 'Id',
               dataField: 'id',
               visible: false
           }, {
               id: 'parent',
               caption: 'Parent',
               dataField: 'parent',
               visible: false
       }];

2. Set the showRowHeader and hierarchy properties while initializing the grid.

   var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout({
               allowSorting: true,
               showRowHeader: false,
               grouping: [{
                   field: 'country',
                   footer: {
                       visible: false
                   }
               }],
               hierarchy: {
                   keyField: 'id',
                   parentField: 'parent',
                   collapsed: true,
                   column: 'department',
                   footer: {
                       visible: true
                   }
               }
       }));

See Also

Using the Tree Grid
Creating a Tree Column
Customizing the Hierarchy Footer